<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>springboot+layui Demo</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="icon" href="common/images/kaishun.jpg" type="image/x-icon" />
    <script src="layui/layui.js"></script>
    <script src="layui/jquery-3.3.1.min.js"></script>
</head>
<style>
    body{
        background-repeat: no-repeat;
        background-size:100% 100%;
        background-attachment: fixed;
    }
    .link{
        color: white;
    }
    .link:hover{
        color: orange;
    }
    .forget{
        float: left;
        margin-left: 10px;
    }
    .register{
        float: right;
        margin-right: 10px;
    }
    /*去除input type=number 后面的上下按钮*/
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button{
        -webkit-appearance: none !important;
        margin: 0;
    }
</style>
<body background="common\images\banner.jpg" >
<div class="layui-container" style="height: 100%">

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30%">
        <legend style="margin-left: 40%"><span style="font-weight: bold;font-size:22px;color:white">springboot+layui Demo</span></legend>
    </fieldset>

    <div class="layui-row">
        <div class="layui-col-xs3">
            <div class="grid-demo grid-demo-bg1">
                &nbsp;
            </div>
        </div>
        <div class="layui-col-xs9">
            <div class="grid-demo">
                <form id="useLogin" class="layui-form" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="margin-left: 10%;color: white;">用户名</label>
                        <div class="layui-input-inline">
                            <input id="userName" name="userName" lay-verify="required" class="layui-input" type="text"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="margin-left: 10%;color: white;">密&nbsp;&nbsp;码</label>
                        <div class="layui-input-inline">
                            <input id="userPassword" name="userPassword" lay-verify="required" autocomplete="off" class="layui-input" type="password"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="margin-left: 10%;"></label>
                        <div class="layui-input-inline">
                            <a href="#" class="link forget" onclick="forgetPassword()">忘记密码</a>
                            <a href="#" class="link register" onclick="register()">注册</a>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="margin-left: 10%;"></label>
                        <div class="layui-input-block">
                            <button class="layui-btn" type="reset" style="margin-right: 5%">重置</button>
                            <button class="layui-btn"  lay-submit="" lay-filter="login">提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!--注册用户 begin-->
    <div id="registerUser" class="layer_self_wrap" style="display:none;padding: 20px">
        <form id="registerForm" class="layui-form layui-form-pane" method="post" action="" style="margin-top: 20px;">
            <input id="id" type="hidden" name="id"/>

            <div class="layui-form-item">
                <label class="layui-form-label">用户名称</label>
                <div class="layui-input-inline">
                    <input id="registerName" name="userName" lay-verify="required" autocomplete="off" class="layui-input" type="text"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-inline">
                    <select name="sex"  xm-select="sex">
                        <option value="1">男</option>
                        <option value="2">女</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">年龄</label>
                <div class="layui-input-inline">
                    <input id="age" name="age" lay-verify="required" autocomplete="off" class="layui-input" type="number"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号码</label>
                <div class="layui-input-inline">
                    <input id="phone" name="phone" lay-verify="required" autocomplete="off" class="layui-input" type="number"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-inline">
                    <input id="verificationCode" name="verificationCode" lay-verify="required" autocomplete="off" class="layui-input" type="number"/>
                </div>
                <button class="layui-btn layui-btn-normal" type="button" onclick="getVerificationCode('register')">获取验证码</button>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input id="password" name="userPassword" lay-verify="required" autocomplete="off" class="layui-input" type="password"/>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin-left: 10px;text-align: center">
                    <button class="layui-btn"  lay-submit="" lay-filter="userRegister">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
    <!--注册用户 end-->

    <!--忘记密码 begin-->
    <div id="forgetPassword" class="layer_self_wrap" style="padding: 20px;display:none;">
        <form id="forgetPasswordForm" class="layui-form layui-form-pane" method="post" action="" style="margin-top: 20px;">

            <div class="layui-form-item">
                <label class="layui-form-label">您的手机号</label>
                <div class="layui-input-inline">
                    <input id="forgetPasswordPhone" name="forgetPhone" lay-verify="required" autocomplete="off" class="layui-input" type="number"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-inline">
                    <input id="forgetVerificationCode" name="forgetVerificationCode" lay-verify="required" autocomplete="off" class="layui-input" type="number"/>
                </div>
                <button class="layui-btn layui-btn-normal" type="button" onclick="getVerificationCode('forgetPassword')">获取验证码</button>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">新密码</label>
                <div class="layui-input-inline">
                    <input id="newPassword" name="newPassword" lay-verify="required" autocomplete="off" class="layui-input" type="text"/>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin-left: 10px;">
                    <button class="layui-btn"  lay-submit="" lay-filter="forgetPassword">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
    <!--忘记密码 end-->
</div>
</body>

<script type="text/javascript" src="common/js/login.js"></script>
<script type="text/javascript" src="/common/js/ajax.js"></script>
<script type="text/javascript" src="/common/js/utils.js"></script>

</html>